<template>
  <div>
    <div class="pt-5 pb-2">手机 搜索到997件商品</div>
    <el-row>
      <el-col :span="8">
        <div class="text-center text-sm hover:text-myRed-one cursor-pointer">综合排序</div>
      </el-col>
      <el-col :span="8">
        <div class="text-center text-sm hover:text-myRed-one cursor-pointer">销量优先</div>
      </el-col>
      <el-col :span="8">
        <div class="text-center text-sm hover:text-myRed-one cursor-pointer">价格优先</div>
      </el-col>
    </el-row>
    <el-row class="ml-1 mt-4 w-full overflow-hidden" :gutter="10">
      <el-col :span="12" class=" border-solid border" style="border-color: #eee">
        <img src="../assets/shopcartImg.jpg">
        <div class="text-center">华为 荣耀 畅玩4X</div>
        <div class="float-left text-red-600 font-bold pt-2" style="font-size: 10px">￥499.00</div>
        <div class="float-right text-sm pt-2" style="font-size: 10px">销量1110</div>
      </el-col>
      <el-col :span="12" class=" border-solid border" style="border-color: #eee">
        <img src="../assets/shopcartImg.jpg">
        <div class="text-center">华为 荣耀 畅玩4X</div>
        <div class="float-left text-red-600 font-bold pt-2 text-sm" style="font-size: 10px">￥499.00</div>
        <div class="float-right text-sm pt-2" style="font-size: 10px">销量1110</div>
      </el-col>
      <el-col :span="12" class="mt-3 border-solid border" style="border-color: #eee">
        <img src="../assets/shopcartImg.jpg">
        <div class="text-center">华为 荣耀 畅玩4X</div>
        <div class="float-left text-red-600 font-bold pt-2 text-sm" style="font-size: 10px">￥499.00</div>
        <div class="float-right text-sm pt-2" style="font-size: 10px">销量1110</div>
      </el-col>
      <el-col :span="12" class="mt-3 border-solid border" style="border-color: #eee">
        <img src="../assets/shopcartImg.jpg">
        <div class="text-center">华为 荣耀 畅玩4X</div>
        <div class="float-left text-red-600 font-bold pt-2 text-sm" style="font-size: 10px">￥499.00</div>
        <div class="float-right text-sm pt-2" style="font-size: 10px">销量1110</div>
      </el-col>
      <el-col :span="12" class="mt-3 border-solid border" style="border-color: #eee">
        <img src="../assets/shopcartImg.jpg">
        <div class="text-center">华为 荣耀 畅玩4X</div>
        <div class="float-left text-red-600 font-bold pt-2 text-sm" style="font-size: 10px">￥499.00</div>
        <div class="float-right text-sm pt-2" style="font-size: 10px">销量1110</div>
      </el-col>
      <el-col :span="12" class="mt-3 border-solid border" style="border-color: #eee">
        <img src="../assets/shopcartImg.jpg">
        <div class="text-center">华为 荣耀 畅玩4X</div>
        <div class="float-left text-red-600 font-bold pt-2 text-sm" style="font-size: 10px">￥499.00</div>
        <div class="float-right text-sm pt-2" style="font-size: 10px">销量1110</div>
      </el-col>
      <el-col :span="12" class="mt-3 border-solid border" style="border-color: #eee">
        <img src="../assets/shopcartImg.jpg">
        <div class="text-center">华为 荣耀 畅玩4X</div>
        <div class="float-left text-red-600 font-bold pt-2 text-sm" style="font-size: 10px">￥499.00</div>
        <div class="float-right text-sm pt-2" style="font-size: 10px">销量1110</div>
      </el-col>
      <el-col :span="12" class="mt-3 border-solid border" style="border-color: #eee">
        <img src="../assets/shopcartImg.jpg">
        <div class="text-center">华为 荣耀 畅玩4X</div>
        <div class="float-left text-red-600 font-bold pt-2 text-sm" style="font-size: 10px">￥499.00</div>
        <div class="float-right text-sm pt-2" style="font-size: 10px">销量1110</div>
      </el-col>
    </el-row>
    <div class="text-center mt-6">
      <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
:deep(.el-button__text--expand) {
  @apply text-white
}

:deep(.el-input__inner):focus {
  @apply border-myRed-one
}
</style>